<template>
  <div>
    <!--搜索组件-->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.serialNumber" placeholder="请输入流水号" clearable></el-input>
          <el-input v-model="searchModel.schemeNo" placeholder="请输入计划编号" clearable></el-input>
          <el-input v-model="searchModel.workmanship" placeholder="请输入作业名称" clearable></el-input>
          <el-input v-model="searchModel.materialName" placeholder="请输入物料名称" clearable></el-input>
          <el-input v-model="searchModel.project" placeholder="请输入检验项" clearable></el-input>
          <el-select v-model="searchModel.result" placeholder="请选择检验结果">
            <el-option
              v-for="item in searchModel.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="searchModel.surveyor" placeholder="请输入检验人" clearable></el-input>
          <el-date-picker
            v-model="date"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始检验日期"
            end-placeholder="结束检验日期"
            @change="dateFormat"
          >
          </el-date-picker>
          <el-col>
            <el-button
              @click="getSamplingList"
              type="primary"
              round icon="el-icon-search"
            >搜索</el-button>
            <el-button
              @click="reset"
              type="primary"
              round icon="el-icon-refresh"
            >重置</el-button>
          </el-col>
        </el-col>

        <el-col :span="4" align="right">
          <el-button type="primary" clearable icon="el-icon-plus" @click="openEditUI(null)">新增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--结果列表-->
    <el-card id="list">
      <el-table
        :data="samplingList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="serialNumber"
          label="流水号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="schemeNo"
          label="计划编号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="workmanship"
          label="作业名称"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="version"
          label="型号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="units"
          label="单位"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="project"
          label="检验项"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="productionQuantity"
          label="生产数量"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="samplingQuantity"
          label="采样数量"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="testValue"
          label="检验值"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="upperLimit"
          label="阈值上限"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="lowerLimit"
          label="阈值下限"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="result"
          label="检验结果"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result == 1">合格</el-tag>
            <el-tag v-else type="danger">不合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="surveyor"
          label="检验人"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="testTime"
          label="检验时间"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="delStandardById(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--分页组件-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--  用户信息编辑对话框  -->
    <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="samplingForm" :rules="rules" ref="samplingFormRef">
        <el-form-item label="编号" prop="id" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="流水号" prop="serialNumber" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.serialNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划编号" prop="schemeNo" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.schemeNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作业名称" prop="workmanship" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.workmanship" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.materialName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="specification" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.specification" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="version" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.version" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="units" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.units" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验项" prop="project" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.project" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产数量" prop="productionQuantity" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.productionQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采样数量" prop="samplingQuantity" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.samplingQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验值" prop="testValue" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.testValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="阈值上限" prop="upperLimit" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.upperLimit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="阈值下限" prop="lowerLimit" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.lowerLimit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验结果" prop="result" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.result" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验人" prop="surveyor" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.surveyor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验标准" prop="standard" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.standard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验时间" prop="testTime" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.testTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input v-model="samplingForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import samplingApi from '@/api/sampling'
export default {
  name: 'sampling',
  data() {
    return {
      date:'',
      formLabelWidth:'200px',//控制'用户名'到左边的宽度
      samplingForm:{},
      dialogFormVisible:false,//控制对话框是否可见
      title:'',
      total:0,
      searchModel: {
        pageNum:1,
        pageSize: 10,
        startTime:'',
        endTime:'',
        options: [{
          value: '1',
          label: '合格'
        }, {
          value: '0',
          label: '不合格'
        }, ],
        value: '',
      },
      samplingList: [],
      rules:{
        workmanship: [
          { required: true, message: '作业名称不能为空', trigger: 'blur' },
          { min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur' }
        ],
        materialName: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' },
          { min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur' }
        ],
        samplingQuantity: [
          { required: true, message: '采样数量不能为空', trigger: 'blur' },
          { min: 0, max: 999999, message: '数量在0~999999之间', trigger: 'blur' }
        ],
        standard: [
          { required: true, message: '检验标准不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        testValue: [
          { required: true, message: '检验值不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        result: [
          { required: true, message: '检验结果不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],

      }
    }
  },
  methods:{
    dateFormat(picker) {
      this.searchModel.startTime = picker[0].toString()
      this.searchModel.endTime = picker[1].toString()
    },
    reset(){
      this.searchModel.serialNumber = ''
      this.searchModel.schemeNo = ''
      this.searchModel.workmanship = ''
      this.searchModel.materialName = ''
      this.searchModel.project = ''
      this.searchModel.result = ''
      this.searchModel.surveyor = ''
      this.searchModel.startTime = ''
      this.searchModel.endTime = ''
      this.getSamplingList()
    },
    saveList(){
      //触发表单验证
      this.$refs.samplingFormRef.validate((valid) => {
        if (valid) {
          //提交请求给后台
          samplingApi.saveList(this.samplingForm).then(response =>{
            //成功提示
            this.$message({
              message:response.message,
              type:'success'
            });
            //关闭对话框
            this.dialogFormVisible = false;
            //刷新表格
            this.getSamplingList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    clearForm(){
      //清理表单
      this.samplingForm = {};
      this.$refs.samplingFormRef.clearValidate();//清除校验结果
    },
    openEditUI(id){
      //打开编辑界面
      if (id == null){
        this.title='添加生产采样单';
      }else{
        this.title='修改生产采样单';
        //根据id查询数据
        samplingApi.getSamplingById(id).then(response =>{
          this.samplingForm = response.data;
        })
      }
      this.dialogFormVisible=true;
    },
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize;
      this.getSamplingList();
    },
    handleCurrentChange(pageNum){
      this.searchModel.pageNum = pageNum;
      this.getSamplingList();
    },
    getSamplingList() {
      const info = {
        pageNum: this.searchModel.pageNum,
        pageSize: this.searchModel.pageSize,
        serialNumber: this.searchModel.serialNumber,//流水号
        schemeNo: this.searchModel.schemeNo,//计划编号
        workmanship: this.searchModel.workmanship,//作业名称
        materialName: this.searchModel.materialName,//物料名称
        project: this.searchModel.project,//检验项
        result: this.searchModel.result,//检验结果下拉选项
        surveyor: this.searchModel.surveyor,//检验人surveyor
        beginTime: this.searchModel.startTime,
        endTime: this.searchModel.endTime
      }
      samplingApi.getSamplingList(this.searchModel).then(response => {
        this.samplingList = response.data.records;
        this.total = response.data.total;
      });
    },
    delStandardById(sampling){
      this.$confirm(`您确认删除流水号为${sampling.serialNumber}的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        samplingApi.delStandardById(sampling.id).then(response =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getSamplingList();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.getSamplingList();
  }
}
</script>

<style scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input{
  width: 80%;
}
</style>
